<template>
	<view class="bigview">
		<view class="outview">
			<uni-card :is-shadow="false">
				<view class="title">运价</view>
				<view class="price-out">
					<text class="price">{{goods.sourceFreight}}</text><text class="price-t">元/吨</text>
				</view>
				<view class="line"></view>
				<view class="outfont">亏<text class="blackfont">0.00吨</text>(含)不扣费，超出部分每0.1吨(含)<text
						class="blackfont">扣<text>{{goods.lossCost}}</text>元</text></view>
			</uni-card>
			<uni-card :is-shadow="false">
				<view class="title">线路</view>
				<view class="line"></view>
				<view>
					<view class="Hy2">
						<uni-icons type="download-filled" size="25" color="#2E7CFA" class="icons"></uni-icons>
						<view class="text">{{goods.loadingSite.name}}</view>
						<view class="naviview">
							<image src="../../../../static/img/navigation.png" class="navigation"></image>
						</view>
						<view class="texttwo">{{goods.loadingSite.location}}</view>
					</view>
					<view class="point"></view>
					<view class="Hy3">
						<uni-icons type="upload-filled" size="25" color="#27D189"></uni-icons>
						<view class="tag">
							<uni-tag :inverted="true" text="自动过磅" type="success" />
						</view>
						<view class="text">{{goods.unloadingSite.name}}</view>
						<view class="naviviewtwo">
							<image src="../../../../static/img/navigation.png" class="navigation"></image>
						</view>
						<view class="texttwo">{{goods.unloadingSite.location}}</view>
					</view>
				</view>
			</uni-card>
			<uni-card :is-shadow="false">
				<view class="title">货源</view>
				<view class="line"></view>
				<view class="goodstitle">货&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;物<view class="goodscontent">
						{{goods.goodsName}}
					</view>
				</view>
				<view class="goodstitle">余&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;量<view class="goodscontent">
						{{goods.goodsHeadroom}}
					</view>
				</view>
				<view class="goodstitle">货源编号<view class="goodscontent">{{goods.sourceId}}</view>
					<view class="copy" @click="copy"><text class="copyline">|</text>复制</view>
				</view>
				<view class="goodstitle">开始时间<view class="goodscontent">{{goods.postsTime}}</view>
				</view>
				<view class="goodstitle">结束时间<view class="goodscontent">{{goods.endTime}}</view>
				</view>
				<view class="goodstitle">抢单范围<view class="goodscontent"><text>{{goods.loadingSite.robScope}}</text>km</view>
				</view>
				<view class="goodstitle">打卡范围<view class="goodscontent"><text>{{goods.loadingSite.hitScope}}</text>km</view>
				</view>
			</uni-card>
		</view>
		<view class="example-body">
			<view class="tag-view">
				<button class="tagone" type="warn" @click="invoice">联系开票</button>
				<button class="tagtwo" type="primary" @click="order">立即抢单</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sourceId:"",
				goods: {},
			}
		},
		onLoad(option) {
			this.sourceId=option.sourceId
			console.log(this.sourceId)
		},
		onShow() {
			this.showGoods();
		},
		methods: {
			async showGoods(){
				const res = await uni.$http.get("192.168.9.30:8080/waybill/sourceList/selectSourceById/"+this.sourceId)
				console.log(res.data.data1)
				this.goods = res.data.data1
				console.log(this.goods)
			},
			invoice() {
				uni.$showSucc("开票成功")
			},
			order() {
				uni.navigateTo({
					url: "/pages/found-goods/Supply-hall/Order-positioning/Order-positioning?sourceId="+this.sourceId+"&goodsName="+this.goods.goodsName
				})
			},
			copy(){
				uni.$showSucc("已复制")
			}
		}
	}
</script>

<style>
	.tagone {
		margin-top: 20rpx;
		margin-left: 16rpx;
		display: inline-block;
		width: 350rpx;
		height: 100rpx;
		border-radius: 30px;
	}

	.tagtwo {
		margin-top: 20rpx;
		margin-left: 16rpx;
		display: inline-block;
		width: 350rpx;
		height: 100rpx;
		border-radius: 30px;
	}

	.bigview {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
	}

	.outview {
		display: flex;
		flex-flow: column nowrap;
		justify-content: flex-start;
		align-content: space-evenly;
		width: 100%;
		overflow-y: scroll;
	}

	.example-body {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #fff;
		height: 70px;
	}

	.outfont {
		color: #bfbfbf;
	}

	.title {
		font-size: 36rpx;
		color: #000;
		font-weight: bold;
	}

	.copyline {
		color: #f1f2f4;
		margin-right: 15rpx;
	}

	.blackfont {
		color: #000;
	}

	.point {
		width: 60rpx;
		height: 80rpx;
		background-image: url("../../../../static/img/point.png");
		background-repeat: no-repeat;
		background-size: 100%;
		margin-left: -8rpx;
		margin-top: 6rpx;
	}

	.price-t {
		position: relative;
		left: 12rpx;
		color: red;
		font-weight: bold;
		font-size: 34rpx;
		display: inline-block;
		top: 4rpx;
	}

	.price-out {
		width: 230rpx;
		display: flex;
		align-items: center;
		margin-top: 30rpx;
	}

	.price {
		color: red;
		font-size: 56rpx;
		font-weight: bold;
		display: inline-block;
	}

	.line {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		border-bottom: 1rpx #f1f2f4 solid;
	}

	.goodstitle {
		color: "#707070";
		font-size: 30rpx;
	}

	.goodscontent {
		margin-top: 20rpx;
		margin-left: 40rpx;
		display: inline-block;
		color: #000;
	}

	.Hy2 {
		position: relative;
		top: 0px;
		left: -4rpx;
		padding-bottom: 8rpx;
		margin-top: 10rpx;
	}

	.Hy2 .text {
		position: absolute;
		top: 2rpx;
		left: 60rpx;
		font-size: 36rpx;
		font-weight: bold;
		color: #000;
	}

	.Hy2 .texttwo {
		position: absolute;
		left: 58rpx;
		font-size: 30rpx;
		color: #707070;
	}

	.Hy3 {
		position: relative;
		top: -3px;
		left: -4rpx;
		padding-bottom: 8rpx;
		margin-top: 10rpx;
	}

	.Hy3 .text {
		position: absolute;
		top: 4rpx;
		left: 60rpx;
		font-size: 36rpx;
		font-weight: bold;
		color: #000;
	}

	.Hy3 .texttwo {

		margin-left: 58rpx;
		font-size: 30rpx;
		color: #707070;
	}

	.navigation {
		width: 30rpx;
		height: 30rpx;
	}

	.naviview {
		display: inline-block;
		margin-left: 85%;
	}

	.naviviewtwo {
		margin-top: -40rpx;
		margin-left: 92%;
	}

	.tag {
		display: inline-block;
		margin-left: 60%;
	}

	.copy {
		margin-left: 15rpx;
		display: inline-block;
		color: #707070;
		font-size: 28rpx;
	}
</style>
